// 引入
const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
	  sass = require('gulp-sass'),
	  cssmin = require('gulp-clean-css'),
	  babel = require('gulp-babel'),
	  uglify = require('gulp-uglify'),
	  del = require('del'),
	  connect = require('gulp-connect'),
	  {createProxyMiddleware} = require('http-proxy-middleware')
// 配置路径
const path = {
	htmlPath:{
		src:'./src/**/*.html',
		dest:'./dist'
	},
	cssPath:{
		src:'./src/sass/*.scss',
		dest:'./dist/css'
	},
	jsPath:{
		src:'./src/js/*.js',
		dest:'./dist/js'
	},
	iconPath:{
		src:'./src/*.ico',
		dest:'./dist'
	},
	libPath:{
		src:'./src/lib/**/*.*',
		dest:'./dist/lib'
	},
	imgPath:{
		src:'./src/images/*.*',
		dest:'dist/images'
	},
	fontPath:{
		src:'./src/fonts/*.*',
		dest:'dist/fonts'
	}
}

const {htmlPath,cssPath,jsPath,iconPath,imgPath,libPath,fontPath} = path

// 定制任务
const html = () => {
	return gulp.src(htmlPath.src)
	       .pipe(htmlmin({
			   removeComments: true, // 清除HTML注释
			   collapseWhitespace: true, // 压缩HTML
			   collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
			   removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
			   removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
			   removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
			   minifyJS: true, // 压缩页面JS
			   minifyCSS: true // 压缩页面CSS 
		   }))
		   .pipe(gulp.dest(htmlPath.dest))
		   .pipe(connect.reload())
}

const css = () => {
	return gulp.src(cssPath.src)
	       .pipe(sass())
		   .pipe(cssmin())
		   .pipe(gulp.dest(cssPath.dest))
		   .pipe(connect.reload())
}

const js = () => {
	return gulp.src(jsPath.src)
		.pipe(babel({
			presets:['@babel/env']
		}))
		.pipe(uglify())
	    .pipe(gulp.dest(jsPath.dest))
		.pipe(connect.reload())
}

const icon = () => gulp.src(iconPath.src).pipe(gulp.dest(iconPath.dest))
const img = () => gulp.src(imgPath.src).pipe(gulp.dest(imgPath.dest))
const lib = () => gulp.src(libPath.src).pipe(gulp.dest(libPath.dest))
const font = () => gulp.src(fontPath.src).pipe(gulp.dest(fontPath.dest))
const delTak = () => del('dist') //删除

// 监控
const watch = () => {
	gulp.watch(htmlPath.src,html)
	gulp.watch(cssPath.src,css)
	gulp.watch(jsPath.src,js)
}

// 连接
const server = () => {
	connect.server({
		port:2011,
		livereload:true,
		root:'dist',
		middleware(){
			return [
				// createProxyMiddleware('/rap2',{
				// 	target:'',
				// 	changeOrigin:true,
				// 	pathRewrite:{
				// 		'^/rap2':''
				// 	}
				// })
				createProxyMiddleware('/xmyx',{
					target:'http://www.xiongmaoyouxuan.com',
					changeOrigin:true,
					pathRewrite:{
						'^/xmyx':''
					}
				})
			]
		}
	})
}

// 暴露出去
module.exports.default = gulp.series(delTak,gulp.parallel(html,css,js,icon,lib,img,font,watch,server))